<template>
  <el-row :gutter="20">
    <el-col :span="14">
      <el-table
          :data="listenersData"
          style="width: 100%"
          height="200"
          empty-text="未设置监听器"
          highlight-current-row
          @row-click="val => {currentRow = (currentRow && currentRow.key === val.key) ? null : val}"
          ref="singleTable"
      >
        <el-table-column
            prop="event"
            label="事件">
          <template #default="scope">
            <span v-html="scope.row.eventType ? (scope.row.eventId.map(item => {
              return LISTENER_EVENT_TYPE[scope.row.eventType].MAP[item]
            }).join('<br/>') || '未设置事件') : '未设置事件'"></span>
          </template>
        </el-table-column>
        <el-table-column
            prop="listener"
            width="150"
            label="监听器名称">
          <template #default="scope">
            <span>{{ listenersMap[scope.row.listenerId] && listenersMap[scope.row.listenerId].label || "未设置监听器" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="listeners-operate-btn-container">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="add"></el-button>
        <el-button type="primary" size="mini" icon="el-icon-minus" @click="del"></el-button>
      </el-row>
    </el-col>
    <el-col :span="10">
      <c-form :form="form" :label-width="'100px'" :inline=false ref="formRef" v-if="currentRow !== null && visible"></c-form>
      <p v-if="currentRow === null">未选择执行监听器</p>
    </el-col>
  </el-row>
</template>

<script>
import Form from "@/components/Form.vue";
import {eventForm} from "@/components/bpmn/components/bpmnPropertiesPanel/forms";
import {LISTENER_EVENT_TYPE} from "@/components/bpmn/constants/constant";
import {mapActions, mapState} from "vuex";

export default {
  name: "ListenersDialog",
  components: {
    "c-form": Form
  },
  computed: {
    ...mapState({
      listenersList: state => state.flowDesignStore.listenersList
    }),
    listenersMap() {
      const obj = {};
      this.listenersList.forEach(item => {
        item.options.forEach(opt => {
          obj[opt.id] = opt
        })
      })
      return obj;
    }
  },
  data() {
    return {
      form: eventForm.call(this),
      currentRow: null,
      LISTENER_EVENT_TYPE,
      eventType: null,
      visible: true
    }
  },
  props: ["listenersData", "listenersListByElement"],
  watch: {
    currentRow: function (val) {
      this.$refs.singleTable.setCurrentRow(val);
      if(val){
        this.setEventTypesByListenerId(val.listenerId);
        this.showDetail(val);
      }
    }
  },
  methods: {
    ...mapActions("flowDesignStore", ["getListenersList"]),
    // 添加监听器
    add() {
      const listenersData = {
        key: new Date().getTime(),
        eventId: [],
        listenerId: "",
        eventType: ""
      }
      this.listenersData.push(listenersData);
      this.currentRow = listenersData;
    },

    // 移除监听器
    del() {
      const listenerIndex = this.listenersData.findIndex(item => {
        return item.key === this.currentRow?.key
      });
      if (listenerIndex !== -1) {
        this.currentRow = this.listenersData.length - 1 === listenerIndex ? null : this.listenersData[listenerIndex + 1];
        this.listenersData.splice(listenerIndex, 1);
      }
    },

    // 选择监听器
    changeListener(val){
      this.updateCurrentRowData({
        listenerId: val,
        eventType:  LISTENER_EVENT_TYPE.TYPE[this.listenersMap[val].type]
      });
      this.form.models.event = "";
      this.setEventTypesByListenerId(val);
    },
    // 更新当前所选项的数据
    updateCurrentRowData(props){
      Object.assign(this.currentRow, props)
    },

    // 通过监听器id获取该监听器类型对应的事件类型
    setEventTypesByListenerId(val){
      this.eventType = val ? LISTENER_EVENT_TYPE.TYPE[this.listenersMap[val].type] : null;
      this.form.items.event.multiple = this.eventType === "EVENT";
      this.form.items.event.options = this.eventType ? LISTENER_EVENT_TYPE[this.eventType].LIST : [];
    },

    // 展示监听选择信息
    showDetail(data) {
      this.form.models.event = data.eventType === "EVENT" ? data.eventId : (data.eventId[0] || "");
      this.form.models.listeners = data.listenerId;
      this.visible = false
      setTimeout(() => {
        this.visible = true;
      },0)
      // this.form.items.event.hide = false;

    }
  }
}
</script>

<style scoped lang="scss">
.listeners-operate-btn-container {
  justify-content: flex-end;
  margin-top: 5px;
}
</style>